<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>记忆翻卡游戏</title>
  <style>
    body {
      background-color: #e6f3ff;
      font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
    }

    .game-container {
      max-width: 1200px;
      margin: 0 auto;
      text-align: center;
    }

    .difficulty-selector {
      margin: 20px 0;
    }

    .difficulty-btn {
      padding: 10px 20px;
      margin: 0 10px;
      font-size: 18px;
      border: none;
      border-radius: 25px;
      background-color: #fff;
      color: #4a90e2;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s;
    }

    .difficulty-btn:hover {
      transform: scale(1.05);
    }

    .difficulty-btn.active {
      background-color: #4a90e2;
      color: white;
    }

    .card-grid {
      display: grid;
      gap: 10px;
      justify-content: center;
      margin-left: 120px;
      margin-top: 40px;
    }

    .card {
      width: 160px;
      height: 90px;
      position: relative;
      cursor: pointer;
      transform-style: preserve-3d;
      transform: scale(1);
      transition: transform 0.6s;
    }

    .card.flip {
      transform: rotateY(180deg);
    }

    .card.matched {
      transform: rotateY(180deg) scale(0.95);
      cursor: default;
    }

    .card-front,
    .card-back {
      width: 100%;
      height: 100%;
      /* padding: 10px; */
      position: absolute;
      border-radius: 15px;
      overflow: hidden;
      backface-visibility: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      background-color: white;
    }

    .card-front {
      transform: rotateY(180deg);
      background-color: white;
    }

    .card-back {
      background-color: #4a90e2;
      font-size: 24px;
      color: white;
    }

    .card img {
      width: 100%;
      object-fit: contain;
    }

    .success-modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 20px;
      border-radius: 15px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      z-index: 1000;
      text-align: center;
    }

    .success-modal.show {
      display: block;
    }

    .restart-btn {
      padding: 10px 20px;
      font-size: 18px;
      border: none;
      border-radius: 25px;
      background-color: #4a90e2;
      color: white;
      cursor: pointer;
      margin: 15px auto;
    }

    .config-options {
      margin: 20px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
    }

    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: .4s;
      border-radius: 34px;
    }

    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }

    input:checked+.toggle-slider {
      background-color: #4a90e2;
    }

    input:checked+.toggle-slider:before {
      transform: translateX(26px);
    }

    .toggle-label {
      font-size: 16px;
      color: #4a90e2;
    }

    .image-source-selector {
      position: fixed;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 30px;
      /* background: rgba(255, 255, 255, 0.9); */
      /* padding: 15px; */
    }

    .image-source-item {
      cursor: pointer;
      border-radius: 10px;
      /* padding: 5px; */
      transition: all 0.3s ease;
      border-radius: 15px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      /* border: 2px solid transparent; */
      background-color: #fff;
      color: #4a90e2;
    }

    /* .image-source-item:hover {
      transform: scale(1);
    } */

    .image-source-item.active {
      border-color: #4a90e2;
      transform: scale(1.2);
      /* border: 1px solid #4a90e2; */
      border-left: none;
      box-shadow: 0 0px 6px 2px rgba(0, 0, 0, 0.2);
      background-color: #4a90e2;
      color: #fff;
    }

    .image-source-item img {
      width: 100px;
      /* height: 60px; */
      /* object-fit: cover; */
      /* border-radius: 8px; */
    }

    .image-source-label {
      font-size: 12px;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 5px;
    }

    .level-selector {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 15px;
      background: rgba(255, 255, 255, 0.9);
      padding: 15px 25px;
      border-radius: 25px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .level-btn {
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      border-radius: 20px;
      background-color: #fff;
      color: #4a90e2;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .level-btn:hover {
      transform: translateY(-2px);
    }

    .level-btn.active {
      background-color: #4a90e2;
      color: white;
    }
  </style>
  <!-- <script src="./peppas.js"></script>
  <script src="./peppas2.js"></script>
  <script src="./mengji.js"></script>
  <script src="./xiong.js"></script>
  <script src="./aotuman.js"></script> -->
  <script src="https://hf-mix.sparkeducdn.com/huohua/peppa-parent/20250429170418563758/2025-04-29/js/peppas2.js"></script>
  <script src="https://hf-mix.sparkeducdn.com/huohua/peppa-parent/20250429170418555812/2025-04-29/js/peppas.js"></script>
  <script src="https://hf-mix.sparkeducdn.com/huohua/peppa-parent/20250429170418513989/2025-04-29/js/mengji.js"></script>
  <script src="https://hf-mix.sparkeducdn.com/huohua/peppa-parent/20250429170418570824/2025-04-29/js/xiong.js"></script>
  <script src="https://hf-mix.sparkeducdn.com/huohua/peppa-parent/20250429170418500375/2025-04-29/js/aotuman.js"></script>
</head>

<body>
  <div class="image-source-selector">
    <div class="image-source-item active" data-source="peppa">
      <img src="" alt="小猪佩奇">
      <div class="image-source-label">小猪佩奇1</div>
    </div>
    <div class="image-source-item" data-source="peppa2">
      <img src="" alt="小猪佩奇2">
      <div class="image-source-label">小猪佩奇2</div>
    </div>
    <div class="image-source-item" data-source="mengji">
      <img src="" alt="萌鸡小队">
      <div class="image-source-label">萌鸡小队</div>
    </div>
    <div class="image-source-item" data-source="xiong">
      <img src="" alt="熊出没">
      <div class="image-source-label">熊出没</div>
    </div>
    <div class="image-source-item" data-source="aotuman">
      <img src="" alt="奥特曼">
      <div class="image-source-label">奥特曼</div>
    </div>
  </div>

  <div class="game-container">
    <!-- <h1>记忆翻卡游戏</h1> -->
    <div class="difficulty-selector">
      <button class="difficulty-btn" data-difficulty="easy">简单</button>
      <button class="difficulty-btn" data-difficulty="medium">中等</button>
      <button class="difficulty-btn" data-difficulty="hard">困难</button>
    </div>
    <div class="config-options">
      <span class="toggle-label">随机排列：</span>
      <label class="toggle-switch">
        <input type="checkbox" id="randomizeToggle" checked>
        <span class="toggle-slider"></span>
      </label>
    </div>
    <div class="card-grid"></div>
  </div>

  <div class="level-selector">
    <button class="level-btn" data-level="1">关卡 1</button>
    <button class="level-btn" data-level="2">关卡 2</button>
    <button class="level-btn" data-level="3">关卡 3</button>
  </div>

  <audio id="successEffect"
    src="https://hf-mix.sparkeducdn.com/huohua/peppa-parent/20250425180849781142/2025-04-25/audios/cbc4dfaa-dd41-4ce7-9456-af3ab783a0cf.mp3"></audio>
  <audio id="successAudio"
    src="https://hf-mix.sparkeducdn.com/huohua/peppa-parent/20250425175252107382/2025-04-25/audios/bd2d3106-f940-44d6-9354-99a3226a9034.mp3"></audio>
  <div class="success-modal">
    <h2>恭喜你！完成挑战！</h2>
    <button class="restart-btn">再玩一次</button>
  </div>

  <script>
    const originRule = {
      easy: [5, 3, 0, 1, 4, 2],
      medium: [6, 1, 4, 3, 0, 5, 2, 7],
      hard: [8, 3, 6, 9, 2, 1, 0, 7, 4, 5]
    }
    const resultRule = {
      easy: [4, 0, 5, 3, 1, 2],
      medium: [5, 0, 4, 1, 2, 3, 6, 7],
      hard: [7, 3, 6, 8, 2, 1, 0, 4, 5, 9]
    }

    const difficultyConfig = {
      easy: { rows: 3, cols: 4 },
      medium: { rows: 4, cols: 4 },
      hard: { rows: 5, cols: 4 }
    };

    const levelConfig = {
      easy: {
        1: { start: 0, end: 6 },
        2: { start: 4, end: 10 },
        3: { start: 9, end: 15 }
      },
      medium: {
        1: { start: 0, end: 8 },
        2: { start: 2, end: 10 },
        3: { start: 7, end: 15 }
      },
      hard: {
        1: { start: 0, end: 10 },
        2: { start: 2, end: 12 },
        3: { start: 5, end: 15 }
      }
    };

    let currentDifficulty = localStorage.getItem('difficulty') || 'easy';
    let currentLevel = localStorage.getItem('level') || '1';
    let firstCard = null;
    let secondCard = null;
    let lockBoard = false;
    let isRandomize = localStorage.getItem('isRandomize') !== 'false';
    let currentImageSource = peppaImages;

    // 创建成功音效
    function createSuccessAudio() {
      const audioEffect = document.getElementById('successEffect');
      const audioSuccess = document.getElementById('successAudio');
      audioEffect.volume = 0.5;
      audioSuccess.play();
      audioEffect.play();
    }

    function arrangeByRule(array, rule) {
      if (!isRandomize) {
        // 只在非随机模式下应用规则
        const currentRule = rule[currentDifficulty];
        const arranged = new Array(array.length);
        array.forEach((item, index) => {
          if (index < currentRule.length) {
            arranged[currentRule[index]] = item;
          } else {
            arranged[index] = item;
          }
        });
        return arranged;
      }
      return array;
    }

    function shuffle(array) {
      if (isRandomize) {
        // 随机模式：真正的随机打乱
        for (let i = array.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
      } else {
        // 非随机模式：按照规则排列
        return array;
      }
    }

    function createCard(content) {
      const card = document.createElement('div');
      card.className = 'card';
      card.innerHTML = `
                <div class="card-front"><img src="${content}?imageView2/w/480" /></div>
                <div class="card-back">?</div>
            `;
      card.dataset.content = content;
      return card;
    }

    function flipCard() {
      if (lockBoard) return;
      if (this === firstCard) return;

      this.classList.add('flip');

      if (!firstCard) {
        firstCard = this;
        return;
      }

      secondCard = this;
      checkForMatch();
    }

    function checkForMatch() {
      const isMatch = firstCard.dataset.content === secondCard.dataset.content;
      isMatch ? disableCards() : unflipCards();
    }

    function disableCards() {
      firstCard.classList.add('matched');
      secondCard.classList.add('matched');
      firstCard.removeEventListener('click', flipCard);
      secondCard.removeEventListener('click', flipCard);
      resetBoard();
      checkWin();
    }

    function unflipCards() {
      lockBoard = true;
      setTimeout(() => {
        firstCard.classList.remove('flip');
        secondCard.classList.remove('flip');
        resetBoard();
      }, 1000);
    }

    function resetBoard() {
      [firstCard, secondCard] = [null, null];
      lockBoard = false;
    }

    function checkWin() {
      const allCards = document.querySelectorAll('.card');
      const matchedCards = document.querySelectorAll('.card.matched');

      if (allCards.length === matchedCards.length) {
        setTimeout(() => {
          createSuccessAudio();
          document.querySelector('.success-modal').classList.add('show');
        }, 500);
      }
    }

    function initializeGame(difficulty = 'easy', level = '1') {
      const { rows, cols } = difficultyConfig[difficulty];
      const { start, end } = levelConfig[difficulty][level];
      const selectedImages = currentImageSource.slice(start, end);
      
      let cardContents;
      if (isRandomize) {
        // 随机模式：直接复制并打乱
        cardContents = [...selectedImages, ...selectedImages];
        cardContents = shuffle(cardContents);
      } else {
        // 非随机模式：按规则排列
        let initialCards = arrangeByRule([...selectedImages], originRule);
        cardContents = [...initialCards, ...initialCards];
        cardContents = arrangeByRule(cardContents, resultRule);
      }

      const grid = document.querySelector('.card-grid');
      grid.style.gridTemplateColumns = `repeat(${cols}, 160px)`;
      grid.innerHTML = '';

      cardContents.forEach(content => {
        const card = createCard(content);
        grid.appendChild(card);
        card.addEventListener('click', flipCard);
      });

      // 显示所有卡片2秒
      const allCards = document.querySelectorAll('.card');
      allCards.forEach(card => card.classList.add('flip'));
      setTimeout(() => {
        allCards.forEach(card => card.classList.remove('flip'));
      }, 2000);
    }

    // 初始化难度选择器
    document.querySelectorAll('.difficulty-btn').forEach(btn => {
      if (btn.dataset.difficulty === currentDifficulty) {
        btn.classList.add('active');
      }
      btn.addEventListener('click', () => {
        document.querySelectorAll('.difficulty-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        currentDifficulty = btn.dataset.difficulty;
        localStorage.setItem('difficulty', currentDifficulty);
        initializeGame(currentDifficulty, currentLevel);
      });
    });

    // 初始化关卡选择器
    document.querySelectorAll('.level-btn').forEach(btn => {
      if (btn.dataset.level === currentLevel) {
        btn.classList.add('active');
      }
      btn.addEventListener('click', () => {
        document.querySelectorAll('.level-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        currentLevel = btn.dataset.level;
        localStorage.setItem('level', currentLevel);
        initializeGame(currentDifficulty, currentLevel);
      });
    });

    // 重新开始按钮
    document.querySelector('.restart-btn').addEventListener('click', () => {
      document.querySelector('.success-modal').classList.remove('show');
      initializeGame(currentDifficulty, currentLevel);
    });

    // 添加随机排列开关事件监听
    document.getElementById('randomizeToggle').addEventListener('change', function (e) {
      isRandomize = e.target.checked;
      localStorage.setItem('isRandomize', isRandomize);
      initializeGame(currentDifficulty, currentLevel);
    });

    // 初始化开关状态
    document.getElementById('randomizeToggle').checked = isRandomize;

    // 初始化图片源预览
    function initializeImageSourcePreviews() {
      document.querySelector('[data-source="peppa"] img').src = peppaImages[0] + '?imageView2/w/480';
      document.querySelector('[data-source="peppa2"] img').src = peppaImages2[0] + '?imageView2/w/480';
      document.querySelector('[data-source="mengji"] img').src = mengjiImages[0] + '?imageView2/w/480';
      document.querySelector('[data-source="xiong"] img').src = xiongImages[0] + '?imageView2/w/480';
      document.querySelector('[data-source="aotuman"] img').src = aotumanImages[0] + '?imageView2/w/480';
    }

    // 切换图片源
    document.querySelectorAll('.image-source-item').forEach(item => {
      item.addEventListener('click', () => {
        // 更新选中状态
        document.querySelectorAll('.image-source-item').forEach(i => i.classList.remove('active'));
        item.classList.add('active');

        // 更新当前图片源
        switch (item.dataset.source) {
          case 'peppa':
            currentImageSource = peppaImages;
            break;
          case 'peppa2':
            currentImageSource = peppaImages2;
            break;
          case 'mengji':
            currentImageSource = mengjiImages;
            break;
          case 'xiong':
            currentImageSource = xiongImages;
            break;
          case 'aotuman':
            currentImageSource = aotumanImages;
            break;
        }

        // 重新初始化游戏
        initializeGame(currentDifficulty, currentLevel);
      });
    });

    // 初始化图片源预览
    initializeImageSourcePreviews();

    // 初始化游戏
    initializeGame(currentDifficulty, currentLevel);
  </script>
</body>

</html>